<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
	<meta charset="utf-8">
	<title>线路详情</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<meta content="" name="description">
	<meta content="" name="author">
	<!-- BEGIN GLOBAL MANDATORY STYLES -->
	<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
	<link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
	<!-- END GLOBAL MANDATORY STYLES -->
	<!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
	<link href="../assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css">
	<link href="../assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css">
	<!-- END PAGE LEVEL PLUGIN STYLES -->
	<!-- BEGIN PAGE STYLES -->
	<link href="../assets/admin/pages/css/tasks.css" rel="stylesheet" type="text/css" />
	<!-- END PAGE STYLES -->
	<!-- BEGIN THEME STYLES -->
	<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
	<link href="../assets/global/css/components-rounded.css" id="style_components" rel="stylesheet" type="text/css">
	<link href="../assets/global/css/plugins.css" rel="stylesheet" type="text/css">
	<link href="../assets/admin/layout3/css/layout.css" rel="stylesheet" type="text/css">
	<link href="../assets/admin/layout3/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color">
	<link href="../assets/admin/layout3/css/custom.css" rel="stylesheet" type="text/css">
	<!-- END THEME STYLES -->
	<link rel="shortcut icon" href="logo.png" />
	<style>
		[v-cloak]{
			display: none;
		}
	</style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
	<div id="app">
		<!-- BEGIN PAGE CONTAINER -->
		<div class="page-container" v-cloak>
			<!-- BEGIN PAGE CONTENT -->
			<div class="page-content">
				<div class="container">
					<!-- BEGIN PAGE CONTENT INNER -->
					<div class="row">
						<div class="col-md-12">
							<!-- BEGIN PORTLET-->
							<div class="portlet light tasks-widget">
								<div class="portlet-title tabbable-line">
									<div class="caption caption-md">
										<i class="icon-globe theme-font hide"></i>
										<span class="caption-subject theme-font bold uppercase" v-text="link.linkName"></span>
									</div>
									<div class="back"></div>
								</div>
								<div>
									<img class="img-responsive margin-bottom-10" src="../assets\admin\pages\img\line1.jpg"
										alt="">
								</div>
								<div class="portlet-body fix-height">
									<!-- <p style="border-bottom: 3px solid #F4F6F9;"></p> -->

									<div class="font-grey-mint font-sm">
										链路名称：
									</div>
									<div class="font-md font-blue-sharp" v-text="link.lineName"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										业务名称：
									</div>
									<div class="font-md font-blue-sharp">
										<p v-for="el in link.works" v-text="el"></p>
									</div>
									<div class="font-grey-mint font-sm margin-top-10">
										运行状态：
									</div>
									<div class="font-md" v-text="link.status" :class="link.class"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										衰减值：
									</div>
									<div class="font-md font-blue-sharp" v-text="link.attenuations"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										建设年代：
									</div>
									<div class="font-md font-blue-sharp" v-text="link.times"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										维护人信息：
									</div>
									<div class="font-md font-blue-sharp" v-text="link.cancat"></div>

								</div>
							</div>
							<!-- END PORTLET-->
						</div>
					</div>

					<!-- END PAGE CONTENT INNER -->
				</div>
			</div>
			<!-- END PAGE CONTENT -->
		</div>
		<!-- END PAGE CONTAINER -->
	</div>
	<!-- BEGIN JAVASCRIPTS (Load javascripts at bottom, this will reduce page load time) -->
	<!-- BEGIN CORE PLUGINS -->
<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="assets/layer/layer.js" type="text/javascript"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/js/axios.min.js"></script>
<script src="assets/js/xlsx.full.min.js"></script>
<script src="assets/js/config.js"></script>
	<!--[if lt IE 9]>
<script src="../assets/global/plugins/respond.min.js"></script>
<script src="../assets/global/plugins/excanvas.min.js"></script> 
<![endif]-->
	<script>
		(function($) {
			$.extend({       
				urlGet:function(key)
				{
					var aQuery = window.location.href.split("?");  //取得Get参数
					var aGET = new Array();
					if(aQuery.length > 1)
					{
						var aBuf = aQuery[1].split("&");
						for(var i=0, iLoop = aBuf.length; i<iLoop; i++)
						{
							var aTmp = aBuf[i].split("=");  //分离key与Value
							aGET[aTmp[0]] = aTmp[1];
						}
					}
					console.log(key);
					if(!key){
						return aGET
					}
					if(aGET[key]){
						return aGET[key]
					}else{
						return undefined
					}
				}
			})
		})(jQuery);
		jQuery(document).ready(function () {
			console.log($.urlGet('linkId'));
			const {createApp} = Vue;
			const app = createApp({
				data(){
					return {
						link:{},
						linkId:0
					}
				},
				methods:{
					load(){
						layer.load(0,{msg:"努力加载中，请稍后..."});
						try {
							layer.load(0,{msg:"努力加载中，请稍后..."});
							axios.post(config.getUrl() + "/getLinks",{linkId:this.linkId}).then(res => {
								if(res.status == 200){
									console.log(res);
									if(res.data.code == 0){
										layer.closeAll()
										if(res.data.data instanceof Array || res.data.data.lenght > 0){
											var list = res.data.data
											console.log(list);
											let obj = list[0]
											obj.works = JSON.parse(obj.works);
											if(obj.status =="正常"){
												obj.class = "font-green"
											}else if(obj.status == "衰减"){
												obj.class = "font-yellow"
											}else{
												obj.class = "font-red"
											}
											this.link = obj
											console.log(this.link);
										}
									}else{
										layer.closeAll();
										layer.alert("获取链路失败，代码为：" + res.data.msg,{icon:1,time:3000});
										try {
											console.log(aaa);
										} catch (error) {
											console.log(error);
										}
									}
								}else{
									layer.closeAll();
									layer.alert("网络连接失败，请联系管理员",{icon:1,time:3000});
									try {
										console.log(aaa);
									} catch (error) {
										console.log(error);
									}
								}
							})
						} catch (error) {
							console.log(error);
							layer.closeAll();
						}
					},
				},
				created(){
					this.linkId = $.urlGet("linkId");
					console.log(this.linkId);
					this.load()
				},
				mounted(){
					
				}
			})
			app.mount("#app")
		});
	</script>
	<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->

</html>